<template>
  <div class="menu-wrapper">
    <template v-for="item in routes">
      <template v-if="!item.hidden && item.children">
        <router-link
          v-if="
            item.children.length === 1 &&
            !item.children[0].children &&
            !item.alwaysShow &&
            item.children[0].meta &&
            item.children[0].meta.icon
          "
          :to="item.path + '/' + item.children[0].path"
        >
          <el-menu-item :index="item.path + '/' + item.children[0].path">
            <svg-icon
              v-if="item.children[0].meta && item.children[0].meta.icon"
              :icon-class="item.children[0].meta.icon"
            ></svg-icon>
            <template v-slot:title>
              <span
                v-if="item.children[0].meta && item.children[0].meta.title"
                >{{ item.children[0].meta.title }}</span
              >
            </template>
          </el-menu-item>
        </router-link>

        <el-sub-menu v-else :index="item.name || item.path">
          <template v-slot:title>
            <svg-icon
              v-if="item.meta && item.meta.icon"
              :icon-class="item.meta.icon"
            ></svg-icon>
            <span v-if="item.meta && item.meta.title">{{
              item.meta.title
            }}</span>
          </template>
          <template v-for="child in item.children">
            <template v-if="!child.hidden">
              <router-link :to="item.path + '/' + child.path" :key="child.name">
                <el-menu-item :index="item.path + '/' + child.path">
                  <svg-icon
                    v-if="child.meta && child.meta.icon"
                    :icon-class="child.meta.icon"
                  ></svg-icon>
                  <span v-if="child.meta && child.meta.title">{{
                    child.meta.title
                  }}</span>
                </el-menu-item>
              </router-link>
            </template>
          </template>
        </el-sub-menu>
      </template>
    </template>
  </div>
</template>

<script>
import { generateTitle } from '@/utils/i18n'

export default {
  name: 'layoutSidebarItem',
  props: {
    routes: {
      type: Array
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    generateTitle
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.el-sub-menu .el-menu-item {
  min-width: unset;
}
</style>
